import React, { Component } from 'react';
import Input from '../../components/allgoods/Input';
import * as search from '../../api/search'
// 导入scss
import '../../styles/allgoods/Allgoods.scss'

class Allgoods extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs: [
                '综合', '销量', '新品', '价格', '筛选'
            ],
            currentIndex: 0,
            searchlist: []
        }
    }

    // 去详情页
    todetail(id) {
        this.props.history.push({ pathname: '/detail', state: { id } })
    }

    // 点击获取下标
    handleClick(index) {
        this.setState({
            currentIndex: index
        }, () => {
            console.log(this.state.currentIndex);
        })
    }

    // 全部商品数据
    componentDidMount() {

        var id = this.props.location.state.id
        search.good_list({ id }).then((res) => {
            this.setState({ searchlist: res.data.list })
        })
    }
    // 空页面展示
    fun() {
        return (
            <div className='kun'>
                <img src="https://news.stcn.com/sd/202102/W020210209441463007583.jpeg" alt="" />
            </div>
        )
    }

    render() {
        return (
            <div className='allgoods'>
                <Input />
                <div className='allgoods-one'>
                    {
                        this.state.tabs.map((item, index) => {
                            return (
                                <div onClick={() => { this.handleClick(index) }} key={index} className={` ${this.state.currentIndex == index ? 'active' : ''}`} >
                                    <span>{item}</span>
                                </div>
                            )
                        })
                    }
                </div>
                <div className='allgoods-two'>
                    {
                        this.state.searchlist == undefined ?  this.fun()  : this.state.searchlist.map((item, index) => {
                            return (
                                <div className='allgoods-list' key={index} onClick={() => { this.todetail(item.id) }}>
                                    <div> <img src={item.pic} alt="" /></div>
                                    <div className="name">{item.name}</div>
                                    <div className="price">原价￥{item.salesPrice.value}</div>
                                    <div className="price">活动价￥{item.salesPrice.value}</div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Allgoods;